<template>
	<view class="work-guide-page">
		<!-- 顶部导航栏 -->
		<NavBar :title="'办事指南'" />

		<!-- 蓝色头部卡片 -->
		<view class="blue-header">
			<view class="header-content">
				<image src="@/static/c1.png" class="header-icon" />
				<view class="header-title">社会团体成立登记</view>
			</view>
			<view class="header-stars">
				<text v-for="i in 4" :key="i" class="star">★</text>
			</view>
			<view class="card-actions">
				<view class="action-item"><text class="iconfont icon-zixun"></text> 咨询</view>
				<view class="action-item"><text class="iconfont icon-shoucang"></text> 收藏</view>
				<view class="action-item"><text class="iconfont icon-pingjia"></text> 评价</view>
			</view>
		</view>

		<!-- 白色信息卡片（悬浮效果） -->
		<view class="card-info">
			<view class="info-row">
				<text class="info-label">事项类别</text>
				<text class="info-value">承诺件</text>
			</view>
			<view class="info-row">
				<text class="info-label">申报对象</text>
				<text class="info-value">社团组织</text>
			</view>
			<view class="info-row">
				<text class="info-label">实施部门</text>
				<text class="info-value">民政厅</text>
			</view>
			<view class="info-row">
				<text class="info-label">法定办结时限</text>
				<text class="info-value">75个工作日</text>
			</view>
			<view class="card-expand">
				<text class="expand-text">展开</text>
				<text class="iconfont icon-arrow-down"></text>
			</view>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-list">
			<view class="menu-item">
				<text class="iconfont icon-location"></text>
				<text class="menu-text">办理地点及时间</text>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-accept"></text>
				<text class="menu-text">受理条件</text>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-fee"></text>
				<text class="menu-text">收费标准</text>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-flow"></text>
				<text class="menu-text">办理流程</text>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-material"></text>
				<text class="menu-text">办理材料</text>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-depend"></text>
				<text class="menu-text">办理依据</text>
				<text class="iconfont icon-arrow"></text>
			</view>
		</view>

		<!-- 办理按钮 -->
		<view class="btn-box">
			<button class="handle-btn">办理</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'WorkGuide'
	};
</script>

<style scoped>
	.work-guide-page {
		background: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 20rpx;
		position: relative;
	}

	/* 蓝色头部卡片 */
	.blue-header {
		background: #3496fd;
		border-radius: 0 0 24rpx 24rpx;
		padding: 32rpx 0 24rpx 0;
		margin-bottom: -60rpx;
		/* 让白卡片悬浮在蓝色卡片上 */
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.header-content {
		display: flex;
		align-items: center;
		padding: 0 32rpx 0 32rpx;
	}

	.header-icon {
		width: 56rpx;
		height: 56rpx;
		margin-right: 16rpx;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.header-stars {
		color: #fff;
		font-size: 26rpx;
		padding: 8rpx 32rpx 0 32rpx;
	}

	.card-actions {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 16rpx 32rpx 0 32rpx;
		gap: 48rpx;
	}

	.action-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
	}

	.action-item .iconfont {
		margin-right: 6rpx;
		font-size: 28rpx;
	}

	/* 白色信息卡片 */
	.card-info {
		background: #fff;
		border-radius: 20rpx;
		margin: 24rpx;
		padding: 32rpx 24rpx 0 24rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
		position: relative;
		top: -60rpx;
		z-index: 2;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0;
		font-size: 28rpx;
	}

	.info-label {
		color: #888;
	}

	.info-value {
		color: #222;
		font-weight: 500;
	}

	.card-expand {
		text-align: center;
		color: #2979ff;
		font-size: 26rpx;
		margin: 24rpx 0 8rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6rpx;
	}

	.expand-text {
		font-size: 26rpx;
	}

	.icon-arrow-down {
		font-size: 24rpx;
	}

	/* 菜单列表 */
	.menu-list {
		background: #fff;
		border-radius: 12rpx;
		margin: 16rpx 16rpx 0 16rpx;
		padding: 0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 24rpx 16rpx;
		border-bottom: 1px solid #f0f0f0;
		font-size: 28rpx;
		color: #333;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-item .iconfont {
		font-size: 32rpx;
		margin-right: 16rpx;
		color: #bdbdbd;
	}

	.menu-item .icon-arrow {
		margin-left: auto;
		color: #bdbdbd;
		font-size: 28rpx;
	}

	.menu-text {
		flex: 1;
	}

	/* 办理按钮 */
	.btn-box {
		padding: 24rpx 16rpx 0 16rpx;
	}

	.handle-btn {
		width: 100%;
		background: #1890ff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		padding: 16rpx 0;
		border: none;
	}
</style>